<template>
  <div class="vacation-manage">
    <a-card>
      <h2>请假管理</h2>
      <a-divider></a-divider>
      <a-table :rowKey="(record,index)=> index" :columns="columns" :data-source="list" :pagination='false'>
        <template #state="{record}">
          <!-- {{record.state}} -->
          <!-- 解决初始值默认列表返回 用循环就行了？？？ change写在select上！ -->
          <a-select style="width:90px" v-model:value="record.state" @change="selectChange(record,record.state)">
            <a-select-option v-for="(item,index) in selectOptions" :key="index" :disabled="disabled">{{item.name}}</a-select-option>
          </a-select>
        </template>
        <template #actions="{record}">
          <a href="javascript:;" @click="remove(record)">删除</a>
        </template>
      </a-table>
     
    </a-card>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import { defineComponent, onMounted, ref } from "vue";
import { vacation } from "../../service/index";

import { result } from "../../utils/result";
export default defineComponent({
  setup() {
    const columns = [
      {
        title: "开始时间",
        dataIndex: "startTime",
      },
      {
        title: "结束时间",
        dataIndex: "endTime",
      },
      {
        title: "请假人",
        dataIndex: "vacationPerson",
      },
      {
        title: "请假理由",
        dataIndex: "reason",
      },
      {
        title: "当前状态",
        // dataIndex: "state",
        slots: {
          customRender: "state",
        },
      },
      {
        title: "操作",
        slots: {
          customRender: "actions",
        },
      },
    ];
    const list = ref([]);

    const current = ref(1);
    const total = ref(0);
    const getList = async () => {
      console.log("getList");

      const res = await vacation.list({
        // page: current.value,
        // size: 5,
      });
      console.log("res", res);
      result(res).success(({ data }) => {
        console.log("data", data);
        list.value = data.list;
      });
    };
    //页面current发生变化
    const setPage = (page) => {
      current.value = page;
      getList();
    };
    onMounted(() => {
      getList();
    });
    /**多选框 */
    const selectOptions = ref([
      {
        value: 0,
        name: "审批中",
      },
      {
        value: 1,
        name: "通过",
      },
      {
        value:2,
        name:'否决',
      }
    ]);
    const disabled = ref(false);
    const selectChange = async ({ _id }, state) => {
      console.log("change", _id, state);
    
      const res = await vacation.changeState(_id, state);
      if(res.data.code==200){
        // console.log('res',res.data);
        message.success(res.data.msg)
      }
      // result(res).success(({ data }) => {
      //   console.log("data", data);
      // });
    };

    //删除
    const remove = async(item) => {
      console.log('remove',item);
      const res=await vacation.removeVacation(item._id)
      if(res.data.code==200){
        message.success('删除成功')
        getList()
      }
    };
   
    return {
      disabled,
      selectOptions,
      selectChange,
      columns,
      getList,
      list,
      current,
      total,
      setPage,
      remove,
    };
  },
});
</script>

<style lang='less' scoped>
@import url("../../assets/styles/common.less");
</style>